<script setup lang="ts">

import {
  NThemeEditor,
} from 'naive-ui';

import {
  SubtractCircle20Regular,
} from '@vicons/fluent';

</script>

<template>
  <n-theme-editor>
    <n-layout class="h-screen">
      <n-layout-header
          bordered
          class="h-16"
      >
        YS-Vue-Naive-APP
        <n-button type="warning" >
          <template #icon>
            <n-icon>
              <SubtractCircle20Regular></SubtractCircle20Regular>
            </n-icon>
          </template>
          你好
        </n-button>
      </n-layout-header>
      <n-layout position="absolute" class="top-16" has-sider>
        <n-layout-sider
            class="top-0"
            content-style="padding: 24px;"
            :native-scrollbar="false"
            bordered
        >
          <n-h2>海淀桥
            121212
          </n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
          <n-h2>海淀桥</n-h2>
        </n-layout-sider>
        <n-layout-content class="top-0" :native-scrollbar="false" content-style="padding:24px">
        </n-layout-content>
      </n-layout>
    </n-layout>
    <n-global-style />
  </n-theme-editor>
</template>

<style scoped>

</style>
